<template>
	<view>
		<view class="content">
			<view class="topInfo">
				<view class="topInfo_text">本周精选</view>
				<view class="topInfo_change" @click="clickToChange">
					<view class="topInfo_change_text">换一换</view>
					<view class="topInfo_change_img">
						<image class="image" src="/static/images/refresh_circle.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="txtInfo">
				<view class="textInfo_box" v-for="(item, index) in dataPagingList[pagingIndex]" :key="index"
				@click="clickToItem(item)">
					<view class="textInfo_box_img">
						<image class="image" :src="item.thumbnail||item.cover" mode="aspectFill"></image>
					</view>
					<view class="textInfo_box_text">{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pagingIndex: 0
			}
		},	
		props:{
			dataObject: {
				type: Object,
				default: function(){
					return {}
				}
			},
			dataPagingList: {
				type: Array,
				default: function(){
					return []
				}
			}
		},
		methods: {
			clickToChange() {
				this.pagingIndex += 1
				if(this.pagingIndex >= this.dataPagingList.length) {
					this.pagingIndex = 0
				}
			},
			clickToItem(item){
				this.$emit("clickToItem", item)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		margin: 0px 15px;
		margin-bottom: 15px;
		border-radius: 10px;
		// box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		
		.topInfo{
			display: flex;
			box-sizing: border-box;
			margin: 10px 15px;
			justify-content: space-between;
			align-items: center;
			
			.topInfo_text{
				font-size: 18px;
				font-weight: 500;
				color: #3D3D3D;
			}
			.topInfo_change {
				display: flex;
				box-sizing: border-box;
				align-items: center;
				justify-content: center;
				align-items: center;
				justify-content: center;
				// background-color: red;				
				height: 80rpx;
				.topInfo_change_text {
					font: 15px;
					color: #969696;
				}
				.topInfo_change_img{
					flex-shrink: 0;
					margin-left: 4px;
					width: 32rpx;
					height: 32rpx;
					.image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.txtInfo{
			display: flex;
			box-sizing: border-box;
			margin: 0px 5px;
			margin-bottom: 15px;
			
			.textInfo_box{
				width: 33.33%;
				.textInfo_box_img{
					flex-shrink: 0;
					height: 240rpx;
					margin: 0px 20rpx;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 10px;
						// background-color: orange;
					}
				}
				.textInfo_box_text{
					font-size: 14px;
					margin-top: 7px;
					margin: 5px 3px 0px 3px;
					text-align: center;
				}
			}
		}
		
	}
</style>